<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Web Storage</title>
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/x-icon" href="http://flyxiang.org/www/img/favicon.ico">
    <link rel="apple-touch-icon" href="http://flyxiang.org/www/img/flyxiang_57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://flyxiang.org/www/img/flyxiang_72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="http://flyxiang.org/www/img/flyxiang_114.png">
    <link href="../www/css/basic.css" rel="stylesheet" media="all" >
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
    <style>
    	html,body {
    		width: 100%;
    	}
            body {
            font-family: 'Open Sans',sans-serif;
            color:#333;
            background:#EDEDED;
            -webkit-text-size-adjust: none;
        }
        /*Custom text-selection colors*/
        ::-moz-selection {background: #F04530; color: #fff; text-shadow: none;}
        ::selection {background: #F04530; color: #fff; text-shadow: none;} 
        a {
            color:#346AA8;
            text-decoration:none;
        }

        a:hover,
        a:focus,
        a:active {
            text-decoration:none;
        }
        h1 {
            text-align: center;
            font-family: 'Oswald',sans-serif;
        }
        h1 a {
            font-size: 30px;
            font-weight: 400;
            text-decoration: none;
            color: #5FA4A0
        }
        h1 a:hover {
            color: #5FA4A0
        }

        
        .container {
            position:relative;
            z-index:1;
            width: 60em;
            padding: 2.5em;
            margin:0 auto;
            background:#EDEDED;
            font-size: 14px;
        }


        .container:after {
            content:"";
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
            font-size:0;
        }

        h1 {
        	margin-bottom: 1.2em;
        }
        .websql {
            width: 30%;
            margin: 0 auto;
        }
        .websql p{
            margin-bottom: 20px;
        }
        .ipt {
            width: 100%;
            border: #737C81 1px solid;
            font-size: 1.2em;
        }
        .Btn {
        	background-color: #737C81;
        	color: white;
        	border: none;
        	padding: 5px 10px;
        }
        .Btn:hover {
        	background-color: #4b575d;
        }
        footer {
            padding: 0 2em;
            font-size: 10px;
        }
    </style>
</head>
<body>
<article class="container">
    <h1><a href="http://www.flyxiang.org">Web SQL Database / 网页SQL数据库</a></h1>
    <div class="websql">
        <p><input class="ipt" type="text" id="todoitem"></p>
        <p><button class="Btn" onclick="webSqlSample.newRecord()">新项</button>
        <button class="Btn" class="Btn" onclick="webSqlSample.createTable()">新建一个表</button>
        <button class="Btn" onclick="webSqlSample.dropTable()">删除表</button></p> 
            <ul class="record-list" id="db-results">
                <li>
                    <span contenteditable="true" onkeyup="webSqlSample.updateRecord(1460, this)">HHH</span> 
                    <a href="#" onclick="webSqlSample.deleteRecord(1460)">删除</a>
                </li>
                <li>
                    <span contenteditable="true" onkeyup="webSqlSample.updateRecord(4088, this)">HHH</span>
                    <a href="#" onclick="webSqlSample.deleteRecord(4088)">删除</a>
                </li>
            </ul>
        <div id="db-log"></div>
    </div>
</article>
<footer>&copy;<a href="http://flyxiang.org">flyxiang.org</a></footer>
<script>
var webSqlSample = (function() {
  var db;
  var log = document.getElementById('db-log');
  if (window.openDatabase) {
    db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);
    showRecords();  
  }
  document.getElementById('db-results').addEventListener('click', function(e) { e.preventDefault(); }, false);

  function onError(tx, error) {
    log.innerHTML = '<p class="error">Error: ' + error.message + '</p>';
  }

  // select all records and display them
  function showRecords() {
    document.getElementById('db-results').innerHTML = '';
    db.transaction(function(tx) {
      tx.executeSql("SELECT * FROM Table1Test", [], function(tx, result) {
        for (var i = 0, item = null; i < result.rows.length; i++) {
          item = result.rows.item(i);
          document.getElementById('db-results').innerHTML += 
              '<li><span contenteditable="true" onkeyup="webSqlSample.updateRecord('+item['id']+', this)">'+
              item['text'] + '</span> <a href="#" onclick="webSqlSample.deleteRecord('+item['id']+')">删除</a></li>';
        }
      });
    });
  }

  function createTable() {
    db.transaction(function(tx) {
      tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],
          function(tx) {  log.innerHTML = '<p>"Table1Test" created!</p>' },
          onError);
    });
  }

  // add record with random values
  function newRecord() {
    var num = Math.round(Math.random() * 10000); // random data
    db.transaction(function(tx) {
      tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value],
          function(tx, result) {
            log.innerHTML = '';
            showRecords();
          }, 
          onError);
    });
  }

  function updateRecord(id, textEl) {
    db.transaction(function(tx) {
      tx.executeSql("UPDATE Table1Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
    });
  }

  function deleteRecord(id) {
    db.transaction(function(tx) {
      tx.executeSql("DELETE FROM Table1Test WHERE id=?", [id],
          function(tx, result) { showRecords() }, 
          onError);
    });
  }

  // delete table from db
  function dropTable() {
    db.transaction(function(tx) {
      tx.executeSql("DROP TABLE Table1Test", [],
          function(tx) { showRecords() }, 
          onError);
    });
  }
  
  return {
    newRecord: newRecord,
    createTable: createTable,
    updateRecord: updateRecord,
    deleteRecord: deleteRecord,
    dropTable: dropTable
  }
})();
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28937623-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>